<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns:>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/element/elemet-ui.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper/swiper-4.1.6.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/rem.css" />
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../js/map/DrawingManager_min.css">
    <link rel="stylesheet" href="../assets/fonts/iconfont/iconfont.css">
    <link href="../assets/css/GA.css" type="text/css" rel="stylesheet">
    <style>
        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .pubHead {
            width: 100%;
            height: 80px;
            padding-left: 40px;
            box-sizing: border-box;
            background-color: #011a42;
        }

        .log {
            float: left;
            width: 40px;
            height: 42px;
            margin-top: 19px;
            background: url('../assets/image/logo.png') no-repeat;
        }

        .logtitle {
            float: left;
            margin-left: 10px;
            height: 80px;
            line-height: 80px;
            width: auto;
            font-size: 22px;
            color: #79afff;
        }

        .tabUl {
            float: left;
            margin-left: 285px;
            overflow: hidden;
        }

        .tabUl li {
            float: left;
            padding: 0px 20px;
            height: 80px;
            line-height: 80px;
            color: #79afff;
            font-size: 18px;
            cursor: pointer;
        }

        .tabUl li.li_active {
            height: 77px;
            font-size: 18px;
            line-height: 80px;
            border-bottom: 3px solid #0070ff;
        }

        .warnActive {
            width: 2rem !important;
            height: 2rem !important;
            margin-top: 0rem !important;
        }

        .el-select,
        .jiadun-container {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .main {
            flex: 1;
            background: #002759;
            width: 100%;
            padding: 0px 28px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .top {
            width: 100%;
            height: 70px;
        }

        .top>span {
            height: 70px;
            line-height: 70px;
            display: inline-block;
            /* float: left; */
            margin-left: 10px;
            font-size: 18px;
            color: #79afff;
        }

        .top .circle {
            width: 8px;
            height: 8px;
            background-color: #0070ff;
            margin-top: 30px;
            margin-left: 15px;
        }

        .top .endspan {
            color: #0068ed;
        }

        .main_body {
            width: 100%;
            flex: 1;
            position: relative;
            margin-bottom: 1rem;
            border-radius: .3rem;
        }

        .left-box {
            position: absolute;
            z-index: 999;
            width: 22rem;
            background: rgba(14, 82, 131, 1);
            left: 10px;
            top: 10px;
            box-sizing: border-box;
            padding: 1rem
            /* opacity:0.8;*/
        }

        .outborder {
            width: 18px;
            height: 18px;
        }

        .left-box .title {
            width: 100%;
            height: 2.5rem;
            border-radius: .2rem;
            border: 1px solid #056DAD;
            background: rgba(0, 53, 120, 1);
            opacity: 0.98;
            display: flex;
            align-items: center
        }

        .left-box .title>div {
            height: 2.5rem;
            line-height: 2.5rem;
            margin: 0 1rem;
            cursor: pointer;
        }

        .right-box {
            position: absolute;
            z-index: 999;
            width: 25rem;
            height: 95%;
            top: 1rem;
            right: .5rem;
            background: rgba(14, 82, 131, 1);
            /* opacity:0.8; */
        }

        .right-box .content {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            padding-left: 1.2rem;
            box-sizing: border-box;
            position: relative;
        }

        .right-box .content .title {
            background: RED;
            position: absolute;
            width: 27.5rem;
            height: 1rem;
            left: 0;
            top: 0;
            Z-index: 9999
        }

        .maprightbox {
            width: 95%;
            background: #111e3f;
            z-index: 99999;
            border: 1px solid #056DAD;
            overflow: hidden;
            background: #00295c;
            padding: 1rem 0
        }

        .maprightbox .maprtop {
            width: 100%;
            height: 2.5rem;
            background-color: #00295c;
            color: #47cdfe;
            font-size: 20px;
            line-height: 2.5rem;
            text-indent: 1rem;
        }

        .maprightbox .maprbody {
            width: 100%;
            height: auto;
            padding: 0px 0.75rem;
            box-sizing: border-box;
        }

        .maprightbox .maprbody .bodytop {
            width: 100%;
            height: 2.5rem;
            border-bottom: 1px solid #0c316e;
        }

        .maprightbox .maprbody .bodytop span {
            font-size: 20px;
            color: #da1515;
            text-indent: 2.5rem;
            line-height: 2.5rem;
        }

        .maprightbox .maprbody .bodytop .bodytopi {
            float: right;
            margin-right: 2rem;
            margin-top: 0.5rem;
            display: inline-block;
            width: 1.4rem;
            height: 1.4rem;
            background: url("../assets/image/locateinformation.png") no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }

        .maprightbox .maprbody .bodymain {
            width: 100%;
            position: relative;
            height: auto;
        }

        .maprightbox .maprbody .bodymain .bodyimg {
            width: 5.5rem;
            height: 6.3rem;
            position: absolute;
            right: 0px;
            top: 0.75rem;
            background-color: #87ceeb;
        }

        .maprightbox .maprbody .bodymain .bodymaint {
            width: auto;
            height: 2rem;
            line-height: 2rem;
            color: #00aef4;
            font-size: 16px;
        }

        .maprightbox .maprbody .bodymain .bodymainul li {
            width: auto;
            height: 1.8rem;
            line-height: 1.8rem;
        }

        .maprightbox .maprbody .bodymain .bodymainul li .lileft {
            color: rgb(0, 174, 244);
        }

        .maprightbox .maprbody .bodymain .bodymainul li .liright {
            color: #00aef4;
        }

        .maprightbox .maprbody .bodymain .selectimemap {
            width: 100%;
            /* margin-top:1rem; */
            height: auto;
            overflow: hidden
        }

        .maprightbox .maprbody .bodymain .selectimemap .lileft {
            color: rgb(0, 174, 244);
            line-height: 2rem;
            overflow: hidden
        }

        .maprightbox .maprbody .bodymain .selectimemap .btnline {
            float: left;
            width: 1.5rem;
            height: 1.5rem;
            background: url("../assets/image/trajectory.png") no-repeat;
            background-size: 100% 100%;
            margin-left: 0px;
            cursor: pointer;
            overflow: hidden
        }

        .el-pagination .btn-prev,
        .el-pagination .btn-next,
        .el-pagination .el-pager .number,
        .el-pagination .el-pager .more {
            background: transparent !important;
            color: #046bb8
        }

        .el-table__body-wrapper {
            background: #00295c;
            border: #00295c;
            color: #015093
        }

        .el-table::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0px;
        }

        .el-table th {
            background: #00295c !important;
            border-color: #00295c;
            color: #2b8dbe
        }

        .el-table tr,
        .el-table tr td {
            background: #00295c !important;
            border-color: #00295c;
            color:  rgb(0, 174, 244)
        }

        .el-table .el-table__row--striped,
        .el-table .el-table__row--striped td {
            background: #00316d !important;
        }

        .el-table td,
        .el-table th.is-leaf {
            border-color: #024b84
        }

        .left-box .title i {
            height: 50px;
            line-height: 50px;
            width: 70px;
            text-align: center;
            cursor: pointer;
            font-size: 28px;
        }

        .icon-signal2xinhao {
            color: #47CDFE;
        }

        .icon-wangluoxinhao {
            color: #00CC66;
        }

        .icon-wifixinhao {
            color: #FFA200;
        }
        .el-date-editor .el-range-separator {
            color: #00aef4;
        }
        .el-table, .el-table__expanded-cell{
            background: transparent
        }
        /*覆盖el样式*/
        .el-date-editor{
            border: 1px solid #056DAD;
        }
        .el-date-editor:hover{
            border: 1px solid #056DAD;
        }
        .selectimemap .el-input__inner{
            border: 1px solid #056DAD;
            background-color: #00295C;
            color: rgb(0, 174, 244);
        }
        .selectimemap .el-range-input::placeholder{
            color: rgb(0, 174, 244);
            cursor: pointer;

        }
        .selectimemap .el-range-input{
            background-color: #00295C;
            cursor: pointer;
            color: rgb(0, 174, 244);
        }



        .test .el-input__inner:hover{
            border: 0px solid #056DAD;
            background-color: #00295C;
            color: rgb(0, 174, 244);
        }

        .test .el-input__inner{
            border: 1px solid #056DAD;
            background-color: #00295C;
            color: rgb(0, 174, 244);
        }
        .test .el-input__inner::placeholder{
            color: rgb(0, 174, 244);
        }
        .el-loading-mask {
            position: absolute;
            z-index: 2000;
            background-color: rgba(255,255,255,.9);
            background: rgb(0, 41, 92) !important;
            margin: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            -webkit-transition: opacity .3s;
            transition: opacity .3s;
        }
        .el-table__row {
            cursor:pointer
        }
        .ellipsis{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .slide-fade-enter-active {
            transition: all .8s ease;
          }
        .slide-fade-leave-active {
        transition: all .3s ease;
        }
        .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(30px);
        opacity: 0;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div id="pubHead" class="pubHead">
            <div class="log"></div>
            <div class="logtitle">福山公安数据治理系统</div>
            <ul class="tabUl">
                <li :class="{'li_active':activeIndex === index}" v-for="(item, index) in menuList" :key="index" @click="routerGo(item)">{{item.name}}
                </li>
                <!-- <li :class="{'li_active':activeIndex === 1}">数据源注册</li>
            <li>数据采集任务管理</li>
            <li>数据采集监控</li>
            <li>录入工具</li>
            <li>资源目录</li> -->
            </ul>
        </div>
        <div class="main">
            <div class="top">
                <span class="circle"></span>
                <span>智能作战系统</span>
                <span>></span>
                <span>地界防控</span>
                <span>></span>
                <span class="endspan">归属地查询</span>
                <el-button  type="primary" size="mini" @click="goBack" style="position:absolute;right:5rem;margin-top:1rem">
                    返回
                </el-button>
                <!-- <div>
                    <el-tree
                    :data="provinceAndCityData"
                    show-checkbox
                    node-key="value"
                    >
                    </el-tree>
                </div> -->
            </div>
            <div class="main_body">
                <div class="left-box">
                    <div class="outborder" style="z-index:9999;position:absolute;top:-1px;left:-1px;background:url(../assets/image/top-left.png)  no-repeat;"></div>
                    <div class="outborder" style="z-index:9999;position:absolute;top:-1px;right:-3px;background:url(../assets/image/top-right.png)  no-repeat;"></div>
                    <div class="outborder" style="z-index:9999;position:absolute;bottom:-3px;left:-1px;background:url(../assets/image/bottom-left.png) no-repeat;"></div>
                    <div class="outborder" style="z-index:9999;position:absolute;bottom:-1px;right:-1px;background:url(../assets/image/bottom-right.png)  no-repeat;"></div>
                    <div class="title">
                        <i class="iconfont icon-signal2xinhao" @click="isShowProbe" title="显示探针"></i>
                        <i class="iconfont icon-wangluoxinhao" @click="isShowEle" title="显示电围"></i>
                        <i class="iconfont icon-wifixinhao"></i>
                    </div>
                    <el-button type="primary" style="color:#fff;margin:1rem 0" @click="searchShow=!searchShow">归属地查询</el-button>
                    <div v-if="searchShow" class="test" style="border-radius: .2rem;border:1px solid #056DAD;box-sizing:border-box;padding:1rem;overflow:hidden">
                        <el-select v-model="taskType" placeholder="请选择特征码" style="width:7rem;float:left">
                            <el-option v-for="item in taskFeatureList" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                        <el-input v-model="searchWord" style="width:10rem;float:left;margin-left:.5rem"></el-input>
                        <el-button type="primary" style="color:#fff;margin-top:1rem" @click="doSearch">查询</el-button>
                    </div>
                </div>
                <transition name="slide-fade">
                    <div class="right-box" v-if="showRight">
                        <div class="outborder" style="z-index:9999;position:absolute;top:-1px;left:-1px;background:url(../assets/image/top-left.png)  no-repeat;"></div>
                        <div class="outborder" style="z-index:9999;position:absolute;top:-1px;right:-3px;background:url(../assets/image/top-right.png)  no-repeat;"></div>
                        <div class="outborder" style="z-index:9999;position:absolute;bottom:-3px;left:-1px;background:url(../assets/image/bottom-left.png) no-repeat;"></div>
                        <div class="outborder" style="z-index:9999;position:absolute;bottom:-1px;right:-1px;background:url(../assets/image/bottom-right.png)  no-repeat;"></div>
                        <div class="content">
                            <div class="el-icon-caret-right" title="收起面板" style="margin-top:.5rem;cursor:pointer;font-size:1.5rem;color:rgb(0, 174, 244)" @click="showRight=false"></div>                                                                               
                            <div style="height:2rem;width:95%;line-height:2rem;background:#003578;border-radius:.2rem;text-indent:1rem;margin:.5rem 0;color:rgb(0, 174, 244)">查询结果列表</div>
                            <div style="background: #00295c!important;padding:0;box-sizing:border-box;width:95%">
                                <el-table :data="tableData" v-loading="loading"  style="width:100%" @row-click="getDetail" stripe>
                                    <el-table-column prop="imsi" label="特征码" width="130">
                                        <template slot-scope="scope">
                                            <span class="ellipsis" v-if="scope.row.imsi" :title="scope.row.imsi">{{scope.row.imsi}}</span>
                                            <span class="ellipsis" v-else-if="scope.row.imei!=='000000000000000'" :title="scope.row.imei">{{scope.row.imei}}</span>                                        
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="phone_prefix" label="号码解析" width="135">
                                        <template slot-scope="scope">
                                            {{scope.row.phone_prefix | phoneComplet}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="province" label="归属地">
                                        <template slot-scope="scope">
                                            <span class="ellipsis" :title="scope.row.province +'/'+ scope.row.city" v-if="scope.row.province">{{scope.row.province+' / '}}{{scope.row.city}}</span>
                                            <span v-else>无数据</span>                                        
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="capture_num" label="捕获次数" width="90">
                                        <template slot-scope="scope">
                                            <span class="ellipsis" v-if="scope.row.capture_num">{{scope.row.capture_num}}</span>
                                            <span v-else>无数据</span> 
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div style="height:2rem;width:95%;line-height:2rem;background:#003578;border-radius:.2rem;text-indent:1rem;margin:.5rem 0;color:rgb(0, 174, 244)">人员详情</div>
                            <div class="maprightbox" v-loading="infoLoading">
                                <div class="maprbody">
                                    <div class="bodymain">
                                        <i class="el-icon-location" style="position:absolute;right:0;color:#47cdfe;font-size:24px;cursor:pointer" title="最后出现位置"
                                            @click="showendpoint"></i>
                                        <ul class="bodymainul">
                                            <li>
                                                <span class="lileft" style="color:#00aef4;">
                                                    IMSI：{{peopleDetail.imsi}}
                                                </span>
                                                <span class="liright"></span>
                                            </li>
                                            <li>
                                                <span class="lileft">首次采集时间：</span>
                                                <span class="liright">{{peopleDetail.firsttime}}</span>
                                                <!-- <i class="el-icon-location" style="color:#47cdfe;font-size:20px;cursor:pointer" @click="showfirstpoint"></i> -->
                                            </li>
                                            <li>
                                                <span class="lileft">最后采集时间：</span>
                                                <span class="liright">{{peopleDetail.lasttime}}</span>
                                            </li>
                                            <li>
                                                <span class="lileft">手机归属地：</span>
                                                <span class="liright" v-if="peopleDetail.city">{{peopleDetail.province}}/{{peopleDetail.city}}</span>
                                            </li>
                                        </ul>
                                        <div class="selectimemap">
                                            <span class="lileft" style="display:inline-block;float:left">人员轨迹：</span>
                                            <div>
                                                <el-date-picker v-model="valuetime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                                                    end-placeholder="结束日期" style="width:18rem;margin:0px;margin-right:1rem;float:left">
                                                </el-date-picker>
                                            </div>
                                            <div class="btnline" @click='showpeopleline'></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </transition>
                <my-map ref='mymap' :electricitypoints="electricityPoints" :probepoints="probePoints" :peopleroutes="peopleRoutes" :peopoleendpoint="peopoleEndPoint"></my-map>
            </div>
        </div>
    </div>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/vue/vue.js"></script>
    <!--<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>-->
    <script src="../js/jquery-3.0.0.min.js.js"></script>
    <script type="text/javascript" src="../js/element/element.js"></script>
    <script type="text/javascript" src="../js/swiper/swiper-4.1.6.min.js"></script>
    <script type="text/javascript" src="../js/urls.js"></script>
    <script src="../js/areaData.js"></script>

    <script src="../js/map/baiduInterface.js"></script>
    <!-- <script src="../js/map/mapFunction.js"></script> -->
    <script src="../js/axios.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script src="../js/mapExternal.js"></script>


    <script type="text/javascript">
        $(function () {
            var vm;
            vm = new Vue({
                el: '#app',
                data: {
                    menuList: [{
                        name: '归属地查询',
                        path: './attributionSearch.html'
                    },
                    {
                        name: '外来人口监测',
                        path: './externalPeople.html'
                    },
                    {
                        name: '外来人口驻留分析',
                        path: './peopleAnalyse.html'
                    },
                    {
                        name: '人口流向分析',
                        path: './populationAnalysis.html'
                    }
                    ],
                    activeIndex: 0,
                    loading:false,
                    infoLoading:false,
                    fileUrl: fileUrl,
                    electricityPoints: [],
                    probePoints: [],
                    electricityFlag: false,
                    probeFlag: false,
                    endFlag:false,                    
                    valuetime: null,
                    tableData: [],
                    taskFeatureList: ['imsi', 'imei'],
                    taskType: null,
                    searchWord: null,
                    searchShow: false,
                    peopleDetail: {},
                    peopleRoutes: [],
                    peopoleEndPoint:{},
                    showRight:false
                },
                created: function () {},
                mounted: function () {
                    let self = this
                    self.electricityPoints = [{}]
                    self.probePoints = [{}]
                    self.peopleRoutes = [{}]
                },
                methods: {
                    getDetail(row) {
                        if(row.captureNum === 0) return false
                        let self = this
                        self.infoLoading = true
                        self.valuetime = []
                        let option = {}
                        if(row.imsi){
                            option= {
                                method: 'post',
                                url: 'collect/getPersonInfo',
                                data: {
                                    "imsi": row.imsi
                                }
                            }
                        } else if(row.imei) {
                            option= {
                                method: 'post',
                                url: 'collect/getPersonInfo',
                                data: {
                                    "imei": row.imei
                                }
                            }
                        }
                         
                        self.$HttpUtil(option, res => {
                            if (res.code === 0) {
                                self.peopleDetail.imei = row.imei
                                self.peopleDetail.mac = row.mac
                                self.peopleDetail.imsi = row.imsi
                                self.peopleDetail = res.data[0] ? res.data[0] : {}
                            } else {
                                self.$NotifyUtil({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'error'
                                })
                            }
                            self.infoLoading = false
                        })
                    },
                    showfirstpoint() {
                        let self = this
                        let option = {
                            method: 'post',
                            url: 'fs/task/getRecentTrail',
                            data: {
                                "mac": self.peopleDetail.mac,
                                "imsi": self.peopleDetail.imsi,
                                "imei": self.peopleDetail.imei
                            }
                        }
                        self.$HttpUtil(option, res => {
                            if (res.code === 0) {
                                console.log(res.code)
                                if (res.data.length >= 1) {
                                    self.mapoption.peopoleendpoint = res.data[0]
                                } else {
                                    self.$NotifyUtil({
                                        title: '失败',
                                        message: '没有找到最后点',
                                        type: 'error',
                                        duration: 3000
                                    })
                                }
                            } else {
                                self.$NotifyUtil({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'error'
                                })
                            }
                        })

                    },
                    isShowEnd() {
                        console.log(this.endFlag)
                        if (!this.endFlag) {
                            this.showendpoint()
                            this.endFlag = !this.endFlag
                        } else {
                            this.$refs.mymap.removeEnd()
                            this.endFlag = !this.endFlag
                        }
                    },
                    // showendpoint() {
                    //     let self = this
                    //     let option = {
                    //         method: 'post',
                    //         url: 'fs/task/getRecentTrail',
                    //         data: {
                    //             "mac": self.peopleDetail.mac,
                    //             "imsi": self.peopleDetail.imsi,
                    //             "imei": self.peopleDetail.imei
                    //         }
                    //     }
                    //     self.$HttpUtil(option, res => {
                    //         if (res.code === 0) {
                    //             console.log(res.code)
                    //             if (res.data.length >= 1) {
                    //                 self.peopoleEndPoint = res.data[0]
                    //             } else {
                    //                 self.$NotifyUtil({
                    //                     title: '失败',
                    //                     message: '没有找到最后点',
                    //                     type: 'error',
                    //                     duration: 3000
                    //                 })
                    //             }
                    //         } else {
                    //             self.$NotifyUtil({
                    //                 title: '失败',
                    //                 message: res.msg,
                    //                 type: 'error'
                    //             })
                    //         }
                    //     })
                    //     // self.peopoleEndPoint = {
                    //     //     "devicecode":"37061139001034",
                    //     //     "lng":"121.2822",
                    //     //     "lat":"37.5334"
                    //     // }
                    // },
                    showendpoint() {
                        let self = this
                        self.peopoleEndPoint = {
                            lng: self.peopleDetail.x,
                            lat: self.peopleDetail.y,
                            lasttime: self.peopleDetail.lasttime,
                            devicecode: self.peopleDetail.devicecode
                        }
                    },
                    showpeopleline() {
                        let self = this
                        if (self.valuetime.length < 1) {
                            return
                        } else {
                            let option = {
                                method: 'post',
                                url: 'fs/task/getTrail',
                                data: {
                                    "mac": self.peopleDetail.mac,
                                    "imsi": self.peopleDetail.imsi,
                                    "imei": self.peopleDetail.imei,
                                    "star": self.valuetime[0],
                                    "end": self.valuetime[1]
                                }
                                //                            data: {"mac":"mac123", "imsi":"imsi456", "imei":"imei789", "star":"2018-03-01 11:04:28", "end":"2018-03-01 11:04:28"}
                            }

                            self.$HttpUtil(option, res => {
                                if (res.code === 0) {
                                    if (res.data.length >= 1) {
                                        self.peopleRoutes = res.data                                        
                                        // self.mapoption.peopoleoption= res.data
                                        // self.showdetailtaskline=true
                                    } else {
                                        self.$NotifyUtil({
                                            title: '失败',
                                            message: '未找到人员轨迹',
                                            type: 'error',
                                            duration: 3000
                                        })
                                    }
                                } else {
                                    self.$NotifyUtil({
                                        title: '失败',
                                        message: res.msg,
                                        type: 'error'
                                    })
                                }
                            })
                        }
                    },
                    doSearch() {
                        let self = this
                        self.peopleDetail = {}
                        let options = {
                            method: 'get',
                            url: 'collect/selectBlongsTo'
                        }
                        if (self.taskType === 'imsi') {
                            options.data = {
                                imsi: this.searchWord
                            }
                        } else if (self.taskType === 'imei') {
                            options.data = {
                                imei: this.searchWord
                            }
                        } else {
                            self.$NotifyUtil({
                                type: 'error',
                                message: '请选择特征码类型'
                            })
                            return false
                        }
                        let re = /^[0-9]*$/
                        if(!(this.searchWord && this.searchWord.length === 15 && re.test(this.searchWord))){
                            self.$NotifyUtil({
                                type: 'error',
                                message: '请输入15位正确的特征码'
                            })
                            return false
                        }
                        self.showRight = true
                        self.loading = true                        
                        self.$HttpUtil(
                            options,
                            res => {
                                if (res.code === 0 && res.data) {
                                    self.tableData = res.data.data ? [res.data.data] : []
                                    self.loading = false                                    
                                } else {
                                    self.$NotifyUtil({
                                        type: 'error',
                                        message: res.msg
                                    })
                                    self.loading = false                                                                        
                                }
                            },
                            err => {
                                console.log(JSON.stringify(err))
                                self.loading = false                                                                    
                            }
                        )
                    },
                    test() {
                        console.log(this.areaPoint)
                    },
                    routerGo(item){
                        window.location.href = item.path
                    },
                    goBack() {
                        window.location.href = 'bigHome2.html'
                    },
                    isShowEle() {
                        if (!this.electricityFlag) {
                            this.showElectricity()
                            this.electricityFlag = !this.electricityFlag
                        } else {
                            this.$refs.mymap.clearElectricity()
                            this.electricityFlag = !this.electricityFlag
                        }
                    },
                    showElectricity() {
                        let self = this
                        let options = {
                            method: 'GET',
                            url: 'collect/findWifi',
                            data: {
                                type: '2'
                            }
                        }
                        self.$HttpUtil(
                            options,
                            res => {
                                if (res.code === 0) {
                                    console.log(res.data)
                                    self.electricityPoints = res.data.map(val => {
                                        return {
                                            lng: val.lng,
                                            lat: val.lat,
                                            id: val.device_code,
                                            address: val.address,
                                            factoryName: val.factory_name,
                                            source: val.source
                                        }
                                    })
                                } else {
                                    self.$NotifyUtil({
                                        type: 'error',
                                        message: res.msg
                                    })
                                }
                            },
                            err => {
                                console.log(JSON.stringify(err))
                            }
                        )
                    },
                    isShowProbe() {
                        if (!this.probeFlag) {
                            this.showProbe()
                            this.probeFlag = !this.probeFlag
                        } else {
                            this.$refs.mymap.clearProbe()
                            this.probeFlag = !this.probeFlag
                        }
                    },
                    showProbe() {
                        let self = this
                        let options = {
                            method: 'GET',
                            url: 'collect/findWifi',
                            data: {
                                type: '1'
                            }
                        }
                        self.$HttpUtil(
                            options,
                            res => {
                                if (res.code === 0) {
                                    self.probePoints = res.data.map(val => {
                                        return {
                                            lng: val.lng,
                                            lat: val.lat,
                                            id: val.device_code,
                                            address: val.address,
                                            factoryName: val.factory_name,
                                            source: val.source
                                        }
                                    })
                                } else {
                                    self.$NotifyUtil({
                                        type: 'error',
                                        message: res.msg
                                    })
                                }
                            },
                            err => {
                                console.log(JSON.stringify(err))
                            }
                        )
                    }
                },
                filters: {
                    phoneComplet(val){
                        if(!val) return '无数据'
                        let str = ''
                        let i = 0
                        while(i < 11 - val.length){ str += 'X';i++;}
                        return val + str
                    }
                },
                watch: {}
            })
        })
    </script>
</body>

</html>